<template>
  <el-container>
    <el-header>
      <el-button type="success" style="float: left; margin-left: 20px" @click="openPermissionForm(undefined)">
        添加权限
      </el-button>
    </el-header>
    <el-main>
      <el-table :data="permissions" stripe height="300" style="width: 100%" ref="table"
                @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55"/>
        <el-table-column prop="name" label="权限名" width="180"/>
        <el-table-column prop="des" label="描述"/>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button
                type="text"
                size="small"
                @click.prevent="openPermissionForm(permissions[scope.$index])">
              编辑
            </el-button>
            <el-button
                type="text"
                size="small"
                @click.prevent="deletePermission(permissions[scope.$index])">
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-button type="danger" style="float: left; margin: 20px" @click="bathDelete">批量删除</el-button>
    </el-main>
  </el-container>
  <el-dialog v-model="permissionDialog">
    <el-form class="register_form" label-width="80px" ref="registerForm" :model="permissionForm">
      <h3>{{ currentPermission? '编辑': '添加'}}权限</h3>
      <el-form-item label="权限名">
        <el-input
            v-model="permissionForm.name"
            type="text"
            autocomplete="off"
        />
      </el-form-item>
      <el-form-item label="描述">
        <el-input
            v-model="permissionForm.des"
            type="text"
            autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item label-width="0xp">
        <el-button type="primary" @click="savePermission">{{ currentPermission ? '编辑': '添加'}}</el-button>
        <el-button @click="permissionDialog = false">返回</el-button>
      </el-form-item>
    </el-form>
  </el-dialog>
  <el-dialog v-model="deleteDialogVisible" title="警告" width="30%" center>
    <span>
      是否确定删除权限: {{ pendingDelete.map(p => p.des).toString() }}？
    </span>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="confirmDelete"
        >确定</el-button
        >
      </span>
    </template>
  </el-dialog>
</template>

<script>
import {ElMessage} from "element-plus";
import {ref} from "vue";

export default {
  name: "PermissionDetails",
  data() {
    return {
      permissions: [],
      multipleSelection: [],
      currentPermission: undefined,
      permissionForm: {},
      permissionDialog: ref(false),
      pendingDelete: [],
      deleteDialogVisible: ref(false)
    }
  },
  mounted() {
    this.loadPermissions()
  },
  methods: {
    loadPermissions() {
      let _this = this
      this.$axios.get('permission/list')
          .then(success => {
            if (success.data.code === 200) {
              _this.permissions = success.data.data
            } else {
              ElMessage({
                message: success.data.message,
                type: 'error'
              })
            }
          })
          .catch(fail => {
            console.log(fail);
          })

    },
    handleSelectionChange(val) {
      this.multipleSelection = val
    },
    openPermissionForm(permission) {
      this.currentPermission = permission
      this.permissionForm = permission || {}
      this.permissionDialog = ref(true)
    },
    deletePermission(permission) {
      this.pendingDelete = [permission]
      this.deleteDialogVisible = ref(true)
    },
    bathDelete(){
      this.pendingDelete = this.multipleSelection
      this.deleteDialogVisible = ref(true)
    },
    confirmDelete() {
      let _this = this
      this.$axios.post("permission/delete", this.pendingDelete)
          .then(success => {
            if (success.data.code === 200) {
              ElMessage({
                message: '删除成功',
                type: 'success'
              })
              _this.loadPermissions()
              _this.deleteDialogVisible = ref(false)
            } else {
              ElMessage({
                message: success.data.message,
                type: 'error'
              })
            }
          })
          .catch(fail => {
            console.log(fail);
          })
    },
    savePermission() {
      let _this = this
      this.$axios.post("permission/save", this.permissionForm)
      .then(success => {
        if (success.data.code === 200) {
          ElMessage({
            message: '保存成功',
            type: 'success'
          })
          _this.loadPermissions()
          _this.permissionDialog = ref(false)
        } else {
          ElMessage({
            message: success.data.message,
            type: 'error'
          })
        }
      })
      .catch(fail => {
        console.log(fail);
      })
    }
  }
}
</script>

<style scoped>

</style>